<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { getQuestionDetailsApi } from "@/request/api";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();

const route = useRoute();
const details = ref({
  title: "",
  answer: "",
});
const lang = ref(locale.value);
const feeVisible = ref(false);
const tdData = [
  { amount: "1000元以下的部分", fee: "100元" },
  { amount: "1001元至50000元的部分", fee: "按5%交纳" },
  { amount: "50001元至100000元的部分", fee: "按4%交纳" },
  { amount: "100001元至200000元的部分", fee: "按3%交纳" },
  { amount: "200001元至500000元的部分", fee: "按2%交纳" },
  { amount: "500001元至1000000元的部分", fee: "按1%交纳" },
  { amount: "1000001元以上的部分", fee: "按0.5%交纳" },
];
const tdDataEn = [
  { amount: "1,000 or less", fee: "100" },
  { amount: "1,001 to 50,000", fee: "100 plus 5% of the amount above 1,000" },
  {
    amount: "50,001 to 100,000",
    fee: "2,550 plus 4% of the amount above 50,000",
  },
  {
    amount: "100,001 to 200,000",
    fee: "4,550 plus 3% of the amount above 100,000",
  },
  {
    amount: "200,001 to 500,000",
    fee: "7,550 plus 2% of the amount above 200,000",
  },
  {
    amount: "500,001 to 1,000,000",
    fee: "13,550 plus 1% of the amount above 500,000",
  },
  {
    amount: "1,000,001 or more",
    fee: "18,550 plus 0.5% of the amount above 1,000,000",
  },
];

onMounted(async () => {
  initData();
});

const initData = () => {
  const params = route.params;
  const data = { esId: params.id, req: params.type };
  getQuestionDetailsApi(data).then((res) => {
    if (res && (res.code === 0 || res.result === "200")) {
      details.value = {
        title: locale.value === "en" ? res.data.questionEn : res.data.question,
        answer: locale.value === "en" ? res.data.answerEn : res.data.answer,
      };
      if (res.data.question === "广州仲裁委员会的仲裁收费办法") {
        feeVisible.value = true;
      }
    }
  });
};
</script>

<template>
  <div class="askingDetails">
    <div ref="outBox" class="outBox">
      <div v-if="details.title" class="cntBox">
        <div class="title" v-text="details.title"></div>
        <div class="answer" v-html="details.answer"></div>
        <template v-if="feeVisible">
          <div v-if="lang === 'en'" class="table">
            <table>
              <caption>
                Charge Standards
              </caption>
              <tr>
                <th>Amount in Dispute<br />(in RMB)</th>
                <th>Registration Fee<br />(in RMB)</th>
              </tr>
              <tr v-for="(item, index) in tdDataEn" :key="index">
                <td>{{ item.amount }}</td>
                <td>{{ item.fee }}</td>
              </tr>
            </table>
          </div>
          <div v-else class="table">
            <table>
              <caption>
                收费标准
              </caption>
              <tr>
                <th>收费项目争议金额<br />(人民币)</th>
                <th>仲裁案件受理费<br />(人民币)</th>
              </tr>
              <tr v-for="(item, index) in tdData" :key="index">
                <td>{{ item.amount }}</td>
                <td>{{ item.fee }}</td>
              </tr>
            </table>
          </div>
        </template>
      </div>
      <!-- <div v-else>
        <van-empty image="search" :description="$t('noData')">
          <van-button round type="primary" @click="initData">{{
            $t("refresh")
          }}</van-button>
        </van-empty>
      </div> -->
    </div>
  </div>
</template>

<style lang="less" scoped>
.askingDetails {
  height: 100%;
  background: url("/public/img/mobile/bg-empty.png") no-repeat bottom center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  .outBox {
    width: 90%;
    height: 90%;
    background: url("/public/img/exhibition-bg.png") no-repeat center center;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    margin: auto;
    padding: 20px 10px 10px;
    box-sizing: border-box;
    @media only screen and (orientation: landscape) {
      // 横向
      width: calc(100vw * 0.9);
      height: calc(100vw * 0.7 * 0.625);
    }
    .cntBox {
      height: 100%;
      overflow: auto;
      background: #0378de;
      padding: 10px;
      box-sizing: border-box;
      .title {
        font-size: 18px;
        text-align: center;
        color: #fff;
        margin-bottom: 20px;
      }
      .answer {
        font-size: 16px;
        color: #fff;
        white-space: pre-wrap;
        text-indent: 2em;
        text-align: justify;
        text-align-last: left;
        &::after {
          display: inline-block; /*行内元素*/
          content: "";
          width: 100%; /*可以挤掉文字，保证不跟文字在同一行*/
          // height: 0;
          // visibility: hidden;
        }
      }
    }
    .table {
      table {
        width: 100%;
        border-collapse: collapse;
        color: #fff;
      }

      table caption {
        font-size: 18px;
        font-weight: bold;
        margin: 10px;
      }

      th,
      td {
        border: 1px solid #ddd;
        text-align: center;
        padding: 6px 0;
      }
      th {
        font-size: 16px;
        font-weight: 600;
      }
      td {
        font-size: 16px;
      }

      table thead tr {
        background-color: #008c8c;
        color: #fff;
      }

      table tbody tr:nth-child(odd) {
        background-color: #eee;
      }

      table tbody tr:hover {
        background-color: #ccc;
      }

      table tbody tr td:first-child {
        color: #f40;
      }

      table tfoot tr td {
        text-align: right;
        padding-right: 20px;
      }
    }
  }
}
</style>
